<template>
  <div class="mb-[10px] flex justify-between">
    <CardTitle :title="t('batchSpecialist.select.specialist')" />
    <SendChatTeacher :user-ids="ids" />
  </div>

  <vxe-table
    ref="tableRef"
    v-loading="loading"
    :data="list"
    stripe
    :row-config="{ keyField: 'id' }"
    :checkbox-config="{ reserve: true }"
    :column-config="{ resizable: true }"
    :size="vxeTableSize"
    @checkbox-all="collectSelect"
    @checkbox-change="collectSelect"
  >
    <vxe-column type="checkbox" width="50" align="center" />
    <vxe-column
      :title="t('systemUser.fields.jobCode')"
      field="jobCode"
      align="center"
      show-header-overflow
      show-overflow
      min-width="60"
    />
    <vxe-column
      :title="t('systemUser.fields.nickname')"
      field="nickname"
      align="center"
      show-header-overflow
      show-overflow
      min-width="60"
    />
    <vxe-column
      :title="t('systemUser.fields.mobile')"
      field="mobile"
      align="center"
      show-header-overflow
      show-overflow
      min-width="95"
    />
    <vxe-column
      :title="t('systemUser.fields.deptName')"
      field="deptName"
      align="center"
      show-header-overflow
      show-overflow
      min-width="100"
    />
    <vxe-column
      :title="t('systemUser.fields.zcm')"
      field="zcm"
      align="center"
      show-header-overflow
      show-overflow
      min-width="70"
    />
    <vxe-column
      :title="t('systemUser.fields.workingStatus')"
      field="workingStatus"
      align="center"
      show-header-overflow
      show-overflow
      min-width="60"
    >
      <template #default="scope">
        <dict-tag
          v-if="scope.row.workingStatus"
          :type="DICT_TYPE.WORKING_STATUS"
          :value="scope.row.workingStatus"
        />
      </template>
    </vxe-column>
  </vxe-table>
  <!-- 分页 -->
  <Pagination
    class="justify-center"
    :total="total"
    v-model:page="queryParams.pageNo"
    v-model:limit="queryParams.pageSize"
    @pagination="getList"
    layout="total, prev, pager, next"
  />
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import { useAppStore } from '@/store/modules/app'
import { CardTitle } from '@/components/Card'
import SendChatTeacher from '@/components/SendChatTeacher/index.vue'
import type { VxeTableInstance } from 'vxe-table'
import { BatchSpecialistApi, BatchSpecialistSelectedRespVO } from '@/api/recruit/batchspecialist'
import { DICT_TYPE } from '@/utils/dict'

const props = defineProps<{
  batchId: string
}>()

const { t } = useI18n()
const message = useMessage()

const appStore = useAppStore()
const vxeTableSize = computed(() => appStore.getCurrentSizeVxe)

const loading = ref(false)
const list = ref<BatchSpecialistSelectedRespVO[]>([])
const total = ref(0)

const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  batchId: props.batchId
})

const getList = async () => {
  loading.value = true
  try {
    const data = await BatchSpecialistApi.getSelectedSpecialistByBatchId(queryParams)
    list.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}

const tableRef = ref<VxeTableInstance>()

const remove = async () => {
  if (loading.value) {
    throw new Error()
  }
  // 获取所有已选择的数据
  const selectedData = [
    ...(tableRef.value?.getCheckboxRecords() ?? []),
    ...(tableRef.value?.getCheckboxReserveRecords() ?? [])
  ]
  if (selectedData.length === 0) {
    throw new Error()
  }

  try {
    await message.confirm(t('batchSpecialist.select.removeConfirm'))
  } catch {
    throw new Error()
  }

  loading.value = true
  try {
    await BatchSpecialistApi.removeBatchSpecialist(
      props.batchId,
      selectedData.map((item) => {
        return {
          userId: item.userId
        }
      })
    )
    // 清空复选框
    tableRef.value?.clearCheckboxRow()
  } finally {
    loading.value = false
    getList()
  }
}

const clean = () => {
  list.value = []
  total.value = 0
}

const ids = ref<number[]>([])
const collectSelect = () => {
  ids.value = [
    ...(tableRef.value?.getCheckboxRecords() ?? []),
    ...(tableRef.value?.getCheckboxReserveRecords() ?? [])
  ].map((item) => item.userId)
}

watch(
  () => props.batchId,
  () => {
    if (props.batchId) {
      getList()
    }
  },
  {
    immediate: true
  }
)

defineExpose({
  remove,
  getList,
  clean
})
</script>
